<template>
    <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomeSwiper',
    props: {
      list: Array
    },
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          loop: true,
          speed: 1000,
          autoplay: 2500,
          autoplayDisableOnInteraction: false
        },
        preventLinksPropagation: false// 阻止点击事件冒泡
      }
    },
    computed: {
      showSwiper () {
        return this.list.length
      }
    }
  }
  </script>
  
  <style lang="stylus" scoped>
    .swiper >>> .swiper-pagination-bullet-active
      background:#fff
    .swiper
      overflow:hidden
      width:100%
      height:0
      padding-bottom:31.25%  /*图片的宽除以长*/
      background:#eee
      .swiper-img
        width:100%
  </style>
  